<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据请求axios</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <table border="1" style="text-align:center">
            <tr>
                <th>姓名</th><th>性别</th><th>年龄</th>
            </tr>
            <tr v-for="item in items" :key="item.id">
                <td>{{ item.name }}</td>
                <td>{{ item.gender }}</td>
                <td>{{ item.age }}</td>
            </tr>
        </table>
    </div>
    <script>
        Vue.createApp({
            data() {
                return {
                    items: [] // 用于存储从服务器获取的数据
                };
            },
            created() {
                this.fetchData();
            },
            methods: {
                fetchData() {
                    axios.get('./jiken-7-3.json')
                        .then(response => {
                            this.items = response.data; // 将响应数据赋值给items
                        })
                        .catch(error => {
                            console.error('请求失败：', error);
                        });
                }
            }
        }).mount("#app");
    </script>
</body>
</html>
